<template>
	<view class="beijingse dingwei">
		<!-- 头部内容 -->
		<!-- #ifdef MP-WEIXIN -->
		<u-sticky>
			<view class="dingbu">
				<view class="" :style="{paddingTop:menutop+'rpx'}"></view>
			</view>
		</u-sticky>
		<!-- #endif -->
		<!-- 头部 -->
		<view class="toububox dingwei">
			<image class="wodp" src="../static/image/system/wdx.png" mode=""></image>
			<view class="" style="z-index: 1;position: relative;">
				<view class="flexbetween"  @click="login" v-if="!is_login">
					<view class="flexleft">
						<image class="touxiang margin_right4" src="@/static/image/system/weidenglu.png" mode=""></image>
						<view class="bigtext xiaohei fonweight margin_right1">未登录，点击登录</view>
					</view>
					<u-icon name="arrow-right" color="#000000"></u-icon>
				</view>
				<view class="flexbetween" @click="jumper('/pages_mypage/gerenxx')" v-if="is_login">
					<view class="flexleft">
						<image class="touxiang margin_right4" :src="userInfo.avatar_text" mode=""></image>
						<view class="bigtext xiaohei fonweight margin_right1">{{userInfo.nickname}}</view>
					</view>
					<u-icon name="arrow-right" color="#000000"></u-icon>
				</view>
				<view class="margin_top zhbox flexbetween" @click="jumper('/pages_mypage/yue')">
					<view class="">
						<view class="strongtext xiaohui">账户余额</view>
						<view class="titletext fonweight margin_top1" style="color: #FF7510;">{{userInfo.money || 0}}元</view>
					</view>
					<view class="czbtn flexcenter" @click.stop="jumper('/pages_mypage/chongzhi')">
						<view class="strongtext xiaobai margin_right2">充值</view>
						<u-icon name="arrow-right" color="#FFFFFF"  size="12"></u-icon>
					</view>
				</view>
			</view>	
		</view>
		<view class="mainpadding2">
			<view class="ffffff radius mainpadding ">
				<view class="flexbetween"  @click="order1(0)">
					<view class="ershiba zhonghei">礼品订单</view>
					<view class="flexright">
						<view class="strongtext xiaohui flexcenter margin_right2">查看全部订单</view>
						<u-icon name="arrow-right" color="#AFAFAF"></u-icon>
					</view>
				</view>
				<view class="margin_top5 flexbetween">
					<view class="ershiw flexcenter" @click="order1(1)">
						<view class="">
							<view class="ddicon">
								<image src="../static/image/system/dfk.png" mode=""></image>
							</view>
							<view class="strongtext zhonghei margin_top2">待付款</view>
						</view>
					</view>
					<view class="ershiw flexcenter" @click="order1(2)">
						<view class="">
							<view class="ddicon">
								<image src="../static/image/system/dfh.png" mode=""></image>
							</view>
							<view class="strongtext zhonghei margin_top2">待发货</view>
						</view>
					</view>
					<view class="ershiw flexcenter" @click="order1(3)">
						<view class="">
							<view class="ddicon">
								<image src="../static/image/system/dsh.png" mode=""></image>
							</view>
							<view class="strongtext zhonghei margin_top2">待收货</view>
						</view>
					</view>
					<view class="ershiw flexcenter" @click="order1(4)">
						<view class="">
							<view class="ddicon">
								<image src="../static/image/system/ywc.png" mode=""></image>
							</view>
							<view class="strongtext zhonghei margin_top2">已完成</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding2">
			<view class="mainpadding ffffff radius">
				<view class="flexbetween xiahuaxian" @click="jumper('/pages_mypage/fuwudd')">
					<view class="flexleft">
						<view class="myicon margin_right2">
							<image src="../static/image/system/fwdd.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">服务订单</view>
					</view>
					<u-icon name="arrow-right" color="#C8C8C8"></u-icon>
				</view>
				<view class="flexbetween xiahuaxian margin_top" @click="jumper('/pages_homepage/shouhuodizhi')">
					<view class="flexleft">
						<view class="myicon margin_right2">
							<image src="../static/image/system/dzgl.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">地址管理</view>
					</view>
					<u-icon name="arrow-right" color="#C8C8C8"></u-icon>
				</view>
				<button class="dibubox" hover-class="none" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
					<view class="flexbetween xiahuaxian margin_top">
						<view class="flexleft">
							<view class="myicon margin_right2">
								<image src="../static/image/system/lxkf.png" mode=""></image>
							</view>
							<view class="sanshier xiaohei">联系客服</view>
						</view>
						<u-icon name="arrow-right" color="#C8C8C8"></u-icon>
					</view>
				</button>
				<view class="flexbetween margin_top" @click="jumper('/pages_mypage/guanyuwomen?type=4')">
					<view class="flexleft">
						<view class="myicon margin_right2">
							<image src="../static/image/system/gywm.png" mode=""></image>
						</view>
						<view class="sanshier xiaohei">关于我们</view>
					</view>
					<u-icon name="arrow-right" color="#C8C8C8"></u-icon>
				</view>
			</view>
		</view>
		<u-modal :show="show" cancelColor="#555" confirmColor="#ff9341" :showCancelButton="true" :title="title"
			@cancel="show=false" @confirm="confirm"></u-modal>
		<view class="mainpadding" @click="show = true" v-if="is_login">
			<view class="bigbtn">退出登录</view>
		</view>
		<tabbardi :current="2"></tabbardi>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				is_login: false,
				userInfo: {},
				show: false,
				title: '确定要退出当前账户么？',
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}
		},
		onShareAppMessage() {
			let _this = this
			return {
				title: "旭日万方礼品商城",
				path: "pages/homepage",
			}
		},
		onShareTimeline: function() {
			return {
				title: "旭日万方礼品商城",
				path: "pages/homepage",
			}
		},
		methods: {
			confirm() {
				this.show = false;
				// 将存储的数据改为空达到退出登录的效果
				uni.removeStorageSync('token');
				uni.removeStorageSync('user_id');
				httpRequest.toast("退出登录成功")
				this.is_login=false
				this.userInfo = null
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					uni.setStorageSync("invite_code",res.data.invite_code)
				})
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/wxlogin"
				})
			},
			// 跳转我的订单
			order1(i) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				uni.navigateTo({
					url: '/pages_mypage/lipindd?i=' + i
				})
			},
			jumper(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/wxlogin"
					})
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.toububox{
		padding:0 30rpx 30rpx;
	}
	.czbtn{
		width: 146rpx;
		background-color: #FF7510;
		height:58rpx;
		border-radius: 56rpx;
	}
	.zhbox {
		background-color: #fdfcf8;
		padding: 24rpx 31rpx;
		border-radius: 14rpx;
	}

	.wodp {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 310rpx;
		z-index: 0;
	}

	.dingbu {
		padding: 12rpx 30rpx 30rpx;
		background-size: 100% 100%;
		width: 100%;
		box-sizing: border-box;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240120/f67daf9312d52a25eec5ac4b3e7b2417.png');
	}

	.myicon {
		width: 38rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hdbox {
		width: 48%;
		padding: 32rpx 25rpx 32rpx 34rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		background-image: url('https://solarmini.yuntaiqi.com/uploads/20240109/3dafd70f8df61618851184dbf3d1567e.png');
	}


	.jfbox {
		width: 48%;
		padding: 32rpx 25rpx 32rpx 34rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		background-image: url('https://solarmini.yuntaiqi.com/uploads/20240109/365317faefd2808ee177340534b8a25f.png');
	}

	.fuzhi {
		width: 28rpx;
		height: 28rpx;
	}

	.ddicon {
		width: 45rpx;
		height: 40.56rpx;
		margin: auto;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.mbaibtn {
		width: 84rpx;
		height: 39rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
	}

	.touxiang {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50rpx;
	}
</style>